<template>
  <!-- 滚动条 -->
  <swiper :options="swiperOption" ref='swiper'>
    <!-- 下拉刷新轮播图,不是所有的scroll都有此功能，传入pullDown才会有此功能-->
    <div class="mine-scroll-pull-down" v-if="pullDown">
      <me-loading :text='pullDownText' inline ref="pullDownLoading"/>
    </div>
    <swiper-slide>
      <slot></slot>
    </swiper-slide>
    <!-- 上拉 -->
    <div class="mine-scroll-pull-up" v-if="pullUp">
      <me-loading :text="pullUpText" inline ref="pullUpLoading" />
    </div>
    <div class="swiper-scrollbar" v-if="scrollbar" slot="scrollbar"></div>
  </swiper>
</template>

<script>
  import {swiper, swiperSlide} from 'vue-awesome-swiper';
  import MeLoading from 'base/loading';
  // 引入顶部下拉刷新 参数
  import {
    // 下拉
    PULL_DOWN_HEIGHT,
    PULL_DOWN_TEXT_INIT,
    PULL_DOWN_TEXT_START,
    PULL_DOWN_TEXT_ING,
    PULL_DOWN_TEXT_END,
    // 上拉
    PULL_UP_HEIGHT,
    PULL_UP_TEXT_INIT,
    PULL_UP_TEXT_START,
    PULL_UP_TEXT_ING,
    PULL_UP_TEXT_END
  } from './config';

  export default{
    name: 'MeScroll',
    components: {
      swiper,
      swiperSlide,
      MeLoading
    },
    props: {
      scrollbar: {
        type: Boolean,
        default: true
      },
      data: {
        type: [Array, Object]
      },
      pullDown: { // 下拉
        type: Boolean,
        default: false
      },
      pullUp: { // 上拉
        type: Boolean,
        default: false
      }
    },
    watch: {
      data() {
        this.update();
      }
    },
    created() {
      this.init();
      // console.log(this.swiperOption);
    },
    methods: {
      update() {
        // console.log(this.$refs.swiper);
        this.$refs.swiper && this.$refs.swiper.swiper.update();
      },
      scrollToTop(speed, runCallbacks) {
        this.$refs.swiper && this.$refs.swiper.swiper.slideTo(0, speed, runCallbacks);
      },
      init() {
        this.pulling = false; // 是否正在下拉、上拉
        this.pullDownText = PULL_DOWN_TEXT_INIT;
        this.pullUpText = PULL_UP_TEXT_INIT;
        this.swiperOption = {
          direction: 'vertical',
          slidesPerView: 'auto',
          freeMode: true,
          setWrapperSize: true,
          scrollbar: {
            el: this.scrollbar ? '.swiper-scrollbar' : null,
            hide: true
            // scrollbar: this.scrollbar ? '.swiper-scrollbar' : null,
            // scrollbarHide: true
          },
          // 下拉刷新
          on: {
            sliderMove: this.scroll,
            touchEnd: this.touchEnd,
            transitionEnd: this.scrollEnd
          }
        };
      },
      // 下拉刷新
      scroll() {
        // this.$refs.swiper(swiper组件)，然后'.swiper'(实例化组件)
        const swiper = this.$refs.swiper.swiper;

        // 滚动条滚动的时候，监听事件，顶部按钮什么时候显示、隐藏
        this.$emit('scroll', swiper.translate, this.$refs.swiper.swiper);

        if (this.pulling) { // 拉动过程中
          return;
        }
        // 滚动条滚动的高度，向下拉为正，向上拉为负
        // console.log(swiper.translate);
        if (swiper.translate > 0) { // 下拉
          if (!this.pullDown) { // 用户没有传入下拉
            return;
          }
          if (swiper.translate > PULL_DOWN_HEIGHT) { // 判断下拉高度是否大于下拉开始高度值
            // this.pullDownText = '1111';
            this.$refs.pullDownLoading.setText(PULL_DOWN_TEXT_START);
          } else { // 下拉刷新完，松手，上拉，文字回到初始值
            this.$refs.pullDownLoading.setText(PULL_DOWN_TEXT_INIT);
          }
        } else if (swiper.isEnd) { // 是否滚动到最底部
          if (!this.pullUp) {
            return;
          }
          // 底部上拉高度超过初始值50，就开始上拉加载
          const isPullUp = Math.abs(swiper.translate) + swiper.height - PULL_UP_HEIGHT > parseInt(swiper.$wrapperEl.css('height'));
          if (isPullUp) {
            this.$refs.pullUpLoading.setText(PULL_UP_TEXT_START);
          } else {
            this.$refs.pullUpLoading.setText(PULL_UP_TEXT_INIT);
          }    
        }
      },
      scrollEnd() {
        this.$emit('scroll-end', this.$refs.swiper.swiper.translate, this.$refs.swiper.swiper,this.pulling);
      },
      touchEnd() {
        if (this.pulling) {
          return;
        }
        const swiper = this.$refs.swiper.swiper;

        if (swiper.translate > PULL_DOWN_HEIGHT) { // 下拉
          if (!this.pullDown) {
            return;
          }

          this.pulling = true;
          swiper.allowTouchMove = false; // 禁止触摸（高度超过下拉高度，加载过程中）
          swiper.setTransition(swiper.params.speed); // 找到初始速度，设置速度
          swiper.setTranslate(PULL_DOWN_HEIGHT); // 移动到到初始高度
          swiper.params.virtualTranslate = true; // 定住不给回弹
          this.$refs.pullDownLoading.setText(PULL_DOWN_TEXT_ING); // 文字显示正在刷新的文字
          // 父组件可以使用 props 把数据传给子组件，子组件可以使用 $emit 触发父组件的自定义事件；
          // 加载完后执行的方法，$emit( event, arg )是触发当前实例上的事件。
          this.$emit('pull-down', this.pullDownEnd);

        } else if (swiper.isEnd) { // 底部
          const totalHeight = parseInt(swiper.$wrapperEl.css('height'));
          const isPullUp = Math.abs(swiper.translate) + swiper.height - PULL_UP_HEIGHT > totalHeight;

          if (isPullUp) { // 上拉
            if (!this.pullUp) {
              return;
            }

            this.pulling = true;
            swiper.allowTouchMove = false; // 禁止触摸
            swiper.setTransition(swiper.params.speed);
            swiper.setTranslate(-(totalHeight + PULL_UP_HEIGHT - swiper.height));
            swiper.params.virtualTranslate = true; // 定住不给回弹
            this.$refs.pullUpLoading.setText(PULL_UP_TEXT_ING);
            this.$emit('pull-up', this.pullUpEnd);
          }
        }
      },
      pullDownEnd() {
        const swiper = this.$refs.swiper.swiper;

        this.pulling = false;
        this.$refs.pullDownLoading.setText(PULL_DOWN_TEXT_END);
        swiper.params.virtualTranslate = false; // 可以回弹
        swiper.allowTouchMove = true; // 可以触摸
        swiper.setTransition(swiper.params.speed);
        swiper.setTranslate(0); // 回到高度为0的位置
        // 监听下拉刷新完成，高度恢复0 的时候(顶部搜索条恢复显示)
        setTimeout(() => {
          this.$emit('pull-down-transition-end');
        }, swiper.params.speed);
      },
      pullUpEnd() { // 上拉完成，将值都还原
        const swiper = this.$refs.swiper.swiper;

        this.pulling = false;
        this.$refs.pullUpLoading.setText(PULL_UP_TEXT_END);
        swiper.params.virtualTranslate = false; // 可以回弹
        swiper.allowTouchMove = true; // 可以触摸
      }
    }
  };
</script>

<style lang="scss" scoped>
  // 设置容器的高度小于内容的高度，才会有scroll显示出来
  .swiper-container {
    overflow: hidden;
    width: 100%;
    height: 100%;
  }

  .swiper-slide {
    height: auto;
  }

  // 顶部图片下拉刷新样式
  .mine-scroll-pull-up,
  .mine-scroll-pull-down {
    position: absolute;
    left: 0;
    width: 100%;
  }
  .mine-scroll-pull-down {
    bottom: 100%;
    height: 80px;
  }

  .mine-scroll-pull-up {
    top: 100%;
    height: 30px;
  }
</style>
